<template>
  <div class="popup">
    <div class="main">
      <div class="main-header">
        <p>添加合作</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="detail">
        <div class="tabs flex">
          <p v-for="item in tabs" :key="item.value" class="pointer font-14" :class="{ active: item.value === form.tab }"
            @click="tabChange(item.value)">{{ item.name }}</p>
        </div>
        <template v-if="form.tab === 1">
          <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top" class="rule-form">
            <el-form-item label="请选择要生成短链的产品" prop="pro" style="margin-bottom: 20px;">
              <el-select v-model="form.product_id" placeholder="请选择">
                <el-option v-for="item in proList" :key="item.productId" :label="item.name"
                  :value="item.productId"></el-option>
              </el-select>
            </el-form-item>
            <el-radio-group v-if="form.product_id" v-model="form.radio">
              <el-radio :label="1">使用产品链接生成短链：{{ proList.find(item => item.id === form.pro).link }}</el-radio>
              <el-radio :label="2">使用分销生成短链</el-radio>
            </el-radio-group>
            <el-form-item v-if="form.radio === 2" prop="url" style="margin-top: 10px;">
              <el-input v-model="form.url" placeholder="请输入内容"></el-input>
            </el-form-item>
            <div class="btns flex">
              <p class="font-16 pointer" @click="reset">重置</p>
              <p class="font-16 pointer" @click="submitForm(ruleFormRef)">生成</p>
            </div>
          </el-form>
          <el-table v-if="tableData.length" :data="tableData" style="width: 100%;" class="table">
            <el-table-column label="状态" width="100">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="关联视频" width="120">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="生成时间" width="120">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" width="120">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="追踪链接" width="120">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="折扣码" width="120">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="折扣类型" width="120">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="佣金类型" width="120">
              <template #default="scope">
                <p class="font-14 ellipsis-1">{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <p class="row-btn font-14 pointer">移除</p>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template v-if="form.tab === 2">
          <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top" class="rule-form">
            <el-form-item label="请选择产品" prop="pro" style="margin-bottom: 20px;">
              <el-select v-model="form.product_id" placeholder="请选择">
                <el-option v-for="item in proList" :key="item.productId" :label="item.name"
                  :value="item.productId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="视频/帖子链接" prop="url" style="margin-bottom: 20px;">
              <el-input v-model="form.url" placeholder="请输入内容"></el-input>
            </el-form-item>
            <p class="form-desc font-14">-填写视频可监控视频观看量、点赞量、评论量、互动率</p>
            <div class="btns flex">
              <p class="font-16 pointer" @click="reset">重置</p>
              <p class="font-16 pointer" @click="submitForm(ruleFormRef)">确定</p>
            </div>
          </el-form>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import api from '@/api/index.js';
import { ElMessage, ElLoading } from 'element-plus';
import { defineEmits, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const emit = defineEmits(['close', 'change']);

const rules = {
  pro: [
    { required: true, message: '请选择产品', trigger: 'blur' },
  ],
  url: [
    { required: true, message: '请输入视频链接', trigger: 'blur' },
  ]
};
const tabs = [
  {
    name: '生成产品追踪链接',
    value: 1
  },
  {
    name: '添加监控视频',
    value: 2
  }
];

const form = ref({
  tab: 1,
  radio: 1
});
const ruleFormRef = ref();
const proList = ref([]);
const tableData = ref([
  { name: 'xxxxxxxxxxxxxxxxxx' }
]);

const queryProductList = () => {
  api.pro.queryProductList({
    page: 1,
    perPage: 9999
  }).then(res => {
    proList.value = res.list.filter(item => item.type === 1);
  });
}
const tabChange = e => {
  if (form.value.tab !== e) {
    form.value.tab = e;
  }
}
const reset = () => {
  form.value = {
    tab: form.value.tab,
    radio: 1
  }
}
const close = () => {
  emit('close', null);
}
const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const loadingInstance = ElLoading.service({
        fullscreen: false,
        text: '提交中...'
      });
      api.sensation.addCooperate({
        ...form.value,
        influencer_id: router.query.id
      }).then(() => {
        loadingInstance.close();
        emit('change', form.value.url);
      }).catch(err => {
        loadingInstance.close();
        ElMessage.error(err.msg);
      });
    } else {
      console.log('error submit!', fields)
    }
  })
}

onMounted(() => {
  queryProductList();
});
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 1000px;
    height: 100%;
    background: #fff;

    .detail {
      height: calc(100vh - 52px);
      padding: 20px 25px;
      overflow-y: auto;

      &::v-deep {

        .el-select,
        .el-input {
          width: 432px;
          height: 40px;
        }

        .el-radio {
          width: 100% !important;
        }
      }

      .tabs {
        margin-bottom: 24px;

        p {
          flex: 1;
          height: 40px;
          line-height: 38px;
          background: #f9f9f9;
          border: 1px solid #d9d9d9;
          text-align: center;
          color: #999;

          &:first-child {
            border-radius: 8px 0 0 8px;
          }

          &:last-child {
            border-radius: 0 8px 8px 0;
          }

          &.active {
            border-color: @main-color;
            color: @main-color;
            background: rgba(255, 82, 119, .1);
          }
        }
      }

      .form-desc {
        color: #999;
      }

      .btns {
        justify-content: end;
        margin-top: 25px;

        p {
          width: 96px;
          height: 44px;
          border-radius: 8px;
          margin-left: 8px;
          text-align: center;
          line-height: 44px;

          &:first-child {
            background: #f8f8f8;
            color: #666;
          }

          &:last-child {
            background: @main-color;
            color: #fff;
          }
        }
      }

      .table {
        margin-top: 25px;
      }
    }
  }
}
</style>
